<template>
  <view class="agreement-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="back-btn" @click="navigateBack">
        <image class="back-icon" src="/static/icon/icon-back-orange.png" />
      </view>
      <text class="title">用户协议与隐私政策</text>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content-wrapper" scroll-y>
      <view class="section">
        <text class="section-title">最后更新日期：2023-10-01</text>
        <text class="section-text">
          欢迎使用悦咖音乐工作室服务！请仔细阅读本协议，它明确了您与我们之间的权利义务关系。
        </text>
      </view>

      <!-- 目录导航 -->
      <view class="chapter-list">
        <text class="chapter-title">目录</text>
        <text class="chapter-item" @click="scrollTo('service')">一、服务条款</text>
        <text class="chapter-item" @click="scrollTo('privacy')">二、隐私政策</text>
        <text class="chapter-item" @click="scrollTo('contact')">三、联系我们</text>
      </view>

      <!-- 服务条款 -->
      <view class="chapter" id="service">
        <text class="chapter-title">一、服务条款</text>
        <view class="clause">
          <text class="clause-title">1.1 服务内容</text>
          <text class="clause-content">
            悦咖音乐工作室通过应用程序提供音乐创作工具、作品展示、社区交流及相关技术服务...
          </text>
        </view>

        <view class="clause">
          <text class="clause-title">1.2 账号规则</text>
          <text class="clause-content">
            • 注册需提供有效手机号\n
            • 不得转让或出借账号\n
            • 异常登录会触发安全验证...
          </text>
        </view>
      </view>

      <!-- 隐私政策 -->
      <view class="chapter" id="privacy">
        <text class="chapter-title">二、隐私政策</text>
        <view class="clause">
          <text class="clause-title">2.1 信息收集</text>
          <text class="clause-content">
            我们可能收集以下信息：\n
            • 注册信息：手机号、昵称\n
            • 使用数据：设备信息、操作日志\n
            • 创作内容：音频文件、作品元数据...
          </text>
        </view>

        <view class="clause">
          <text class="clause-title">2.2 数据使用</text>
          <text class="clause-content">
            收集的信息将用于：\n
            • 提供核心服务功能\n
            • 改进产品体验\n
            • 安全保障与异常检测...
          </text>
        </view>
      </view>

      <!-- 联系信息 -->
      <view class="chapter" id="contact">
        <text class="chapter-title">三、联系我们</text>
        <view class="contact-info">
          <text class="info-item">客服邮箱：service@yueka.com</text>
          <text class="info-item">服务时间：工作日 9:00-18:00</text>
          <text class="info-item">公司地址：中国河北省邯郸市邯山区浴新南大街与水厂路交叉口北行200米路东金和园底商</text>
        </view>
      </view>

      <view class="footer">
        <text class="footer-text">悦咖音乐工作室保留最终解释权</text>
        <text class="footer-text">版本生效日期：2023年10月1日</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 锚点跳转（需要根据实际滚动位置调整）
const scrollTo = (id) => {
  uni.pageScrollTo({
    selector: `#${id}`,
    duration: 300
  });
};

const navigateBack = () => {
  uni.navigateBack();
};
</script>

<style scoped>
/* 基础样式 */
.agreement-container {
  height: 100vh;
  background: #ffffff;
}

/* 导航栏 */
.nav-bar {
  height: 88rpx;
  display: flex;
  align-items: center;
  padding: 0 32rpx;
  border-bottom: 1rpx solid #eee;
  position: fixed;
  width: 100%;
  top: 0;
  background: #fff;
  z-index: 10;
}

.back-btn {
  padding: 16rpx;
}

.back-icon {
  width: 36rpx;
  height: 36rpx;
}

.title {
  font-size: 34rpx;
  color: #333;
  margin-left: 24rpx;
  font-weight: 500;
}

/* 内容区域 */
.content-wrapper {
  height: calc(100vh - 88rpx);
  padding: 32rpx;
  box-sizing: border-box;
}

/* 章节样式 */
.chapter {
  margin-bottom: 64rpx;
}

.chapter-title {
  display: block;
  font-size: 32rpx;
  color: #ed8202;
  font-weight: 600;
  margin: 40rpx 0;
  padding-left: 16rpx;
  border-left: 8rpx solid #ed8202;
}

/* 条款样式 */
.clause {
  margin-bottom: 48rpx;
}

.clause-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 16rpx;
  display: block;
}

.clause-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.8;
  white-space: pre-line;
}

/* 联系信息 */
.contact-info {
  padding-left: 32rpx;
}

.info-item {
  display: block;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 24rpx;
}

/* 目录导航 */
.chapter-list {
  background: #f8f8f8;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 48rpx;
}

.chapter-item {
  display: block;
  font-size: 28rpx;
  color: #ed8202;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #eee;
}

/* 页脚 */
.footer {
  margin-top: 80rpx;
  text-align: center;
}

.footer-text {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 16rpx;
}
</style>